<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎用户: {{ name }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

// .dashboard-container {
//     /* 背景图片的路径 */
//     background-image: url('./lcgs.jpeg');
//     background-size: cover; /* 使背景图像覆盖整个容器 */
//     background-position: center; /* 背景图像居中对齐 */
//     background-repeat: no-repeat; /* 避免背景图像重复 */
//     height: 100vh; /* 使容器的高度充满视口高度 */
//     width: 100%; /* 使容器的宽度充满父容器 */
//     display: flex; /* 使用 flex 布局对齐子元素 */
//     align-items: center; /* 垂直居中对齐子元素 */
//     justify-content: center; /* 水平居中对齐子元素 */
// }

</style>
